<template>
	<div>
		<nav class="boot-nav">
			<ul class="pagination boot-page">
				<li>
					<a aria-label="Previous" @click="onFirstClick()">
						<span aria-hidden="true">&laquo;</span>
					</a>
				</li>
				<li>
					<a aria-label="Next" @click="onPrevClick()">
						<span aria-hidden="true">‹</span>
					</a>
				</li>
				<li v-for="(page,index) in pages" :class="activeNum === index ? 'active' : ''">
					<a v-text="page" @click="onPageClick(page)"></a>
				</li>
				<li>
					<a aria-label="Next" @click="onNextClick()">
						<span aria-hidden="true">›</span>
					</a>
				</li>
				<li>
					<a aria-label="Next" @click="onLastClick()">
						<span aria-hidden="true">&raquo;</span>
					</a>
				</li>
			</ul>
			<div class="page-total">
				共 <span v-text="pageTotal"></span> 页
			</div>
		</nav>
		<select class="form-control boot-select" v-model="len">
			<option v-for="(arr,index) in lens" :value="arr" v-text="arr" :selected="index === 0 ? true : false"></option>
		</select>
	</div>
</template>

<script>
	export default {
		props: {
			async: {
				type: Boolean,
				default: true
			},
			lens: {
				type: Array,
				default: function() {
					return [1,10,20]
				}
			},
			// 表格数据（数组）
			data: {
				type: Array,
				default: function() {
					return []
				}
			},
			// AJAX地址
			url: {
				type: String,
				default: ''
			},
			// 显示页数
			pageLen: {
				type: Number,
				default: 5
			}

		},
		data() {
			return {
				activeNum: 0,
				pages:[1],
				len:'10',
				pageTotal:'1'
			}
		},
		created() {
			//this.onPageClick(1)
			this.getData()
		},
		methods: {
			// 点击页码刷新数据
			onPageClick(index) {
				this.activeNum = index - 1;
			},
			// 上一页
			onPrevClick() {
				// 当前页是否为当前最小页码
				if(this.activeNum > 0) {
					this.activeNum = this.activeNum - 1
				} else {
					if(this.pages[0] !== 1) {
						let newPages = []
						for(let i = 0; i < this.pages.length; i++) {
							newPages[i] = this.pages[i] - 1
						}
						this.pages = newPages
						this.getData()
					}
				}
			},
			// 下一页
			onNextClick() {
				// 当前页是否为当前最大页码
				if(this.activeNum < this.pages.length - 1) {
					this.activeNum = this.activeNum + 1
				} else {
					if(this.pages[this.pages.length - 1] < this.pageTotal) {
						let newPages = []
						for(let i = 0; i < this.pages.length; i++) {
							newPages[i] = this.pages[i] + 1
						}
						this.pages = newPages
						this.getData()
					}
				}
			},
			// 第一页
			onFirstClick() {
				if(this.pages[0] === 1) {
					this.activeNum = 0
				} else {
					let originPage = []
					for(let i = 1; i <= this.pageLen; i++) {
						originPage.push(i)
					}
					this.pages = originPage
					this.activeNum === 0 ? this.getData() : this.activeNum = 0
				}
			},
			// 最后一页
			onLastClick() {
				if(this.pageTotal <= this.pageLen) {
					this.activeNum = this.pages.length - 1
				} else {
					let lastPage = []
					for(let i = this.pageLen - 1; i >= 0; i--) {
						lastPage.push(this.pageTotal - i)
					}
					this.pages = lastPage
					this.activeNum === this.pages.length - 1 ? this.getData() : this.activeNum = this.pages.length - 1
				}
			},
			// 获取页码
			getPages() {
				this.pages = []
				if(!this.async) {
					this.pageTotal = Math.ceil(this.data.length / this.len)
				}
				// 比较总页码和显示页数
				if(this.pageTotal <= this.pageLen) {
					for(let i = 1; i <= this.pageTotal; i++) {
						this.pages.push(i)
					}
				} else {
					for(let i = 1; i <= this.pageLen; i++) {
						this.pages.push(i)
					}
				}
			},
			// 页码变化获取数据
			getData() {
					if (this.activeNum > 0) {
						this.activeNum =  this.activeNum % this.pageLen
					}
					this.$store.state.param.pageIndex= this.pages[this.activeNum]-1	
            		this.$store.state.param.pageSize= this.len
					this.$http({
							url: this.url,
							params:this.$store.state.param,
							method:'post',
							headers: {"X-Requested-With": "XMLHttpRequest"},
							emulateJSON: true
						})
						.then(function(response) {
							this.pageTotal = Math.ceil(response.data.count / this.len)
							if(this.pages.length !== this.pageLen || this.pageTotal < this.pageLen) {
								this.getPages()
							}
							if(!response.data.result.length) {
								this.activeNum = this.pageTotal - 1
							}
							this.$store.state.pageData = response.data.result
						})
			},
			// 刷新表格
			refresh() {
				this.getData()
			},
			// 重置并刷新表格
			refresh2() {
				this.pages = [1]
				this.activeNum === 0 ? this.getData() : this.activeNum = 0
			}
		},
		ready() {
			if(!this.async) {
				this.getPages()
			}
			this.getData()
		},
		watch: {
			// 监听显示数量
			'len' (newVal, oldVal) {
				if(!this.async) {
					this.getPages()
					if(this.activeNum + 1 > this.pages.length) {
						this.activeNum = this.pages.length - 1
					}
					this.getData()
				} else {
					this.refresh2()
				}
			},
			// 监测当前页变化
			'activeNum' (newVal, oldVal) {
				this.getData()
			}
		},
		events: {
			'refresh::page' () {
				this.refresh()
			}
		}
	}
</script>

<style>
	.boot-select {
		float: right;
		width: 80px;
	}
	
	.boot-nav {
		float: right;
	}
	
	.boot-page {
		display: inline-block;
		margin: 2px 10px 0 20px;
		vertical-align: middle;
	}
	
	.page-total {
		display: inline-block;
		vertical-align: middle;
	}
</style>